<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 400
			canvas.height = 300
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
//					cxt.fillStyle = "rgb("+Math.floor(255 - i*42.5)+","+Math.floor(255 - i*21.25 - j*21.25)+", "+Math.floor(255 - j*42.5)+")"
					cxt.fillStyle = "rgb("+Math.floor(255 - i*42.5)+","+Math.floor(255 -j*42.5)+", "+0+")"
					cxt.fillRect(50 * i, 50 * j, 50, 50)
				}
			}
		</script>
	</body>
</html>
